<template>
  <div class="banner">
    <div class="hengtiao"></div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <div class="xinxi">
        <el-form-item label="公司标题 :">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input v-model="form.name" />
        </el-form-item>
        <!-- <el-form-item label="作者 :">
          <el-input v-model="form.writer" />
        </el-form-item>
        <el-form-item label="联系 :">
          <el-input v-model="form.phone" />
        </el-form-item>
      </div>
      <div class="tupian">
        <div class="fengmian">封面展示图片 ：</div>
        <el-form-item label="">
          <img :src="form.file" alt="" width="300" height="200" />
          <input type="file" name="file" @change="change" />
        </el-form-item> -->
      </div>
    </el-form>

    <div class="wenben">
      <!-- 此处注意写法v-model:content -->
      <QuillEditor
        ref="myQuillEditor"
        theme="snow"
        v-model:content="content"
        :options="data.editorOption"
        contentType="html"
        @update:content="setValue()"
      />
      <!-- 使用自定义图片上传 -->
      <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />
    </div>
    <el-button @click="up" type="primary" class="anniu">保存</el-button>
  </div>
</template>

<script lang="js" setup>
import { QuillEditor } from "@vueup/vue-quill"
import "@vueup/vue-quill/dist/vue-quill.snow.css"
import { reactive, onMounted, ref, toRaw, watch } from "vue"
import { jiangzuoNewsshowlinewsgetimg,jiangzuoNewsshowlinewsaddnews,addactivity,addcompany } from "@/api/user"
import { useRouter } from 'vue-router'

// const form = ref({
//     file:'',

// })
// const file = ref('')
// const change = (e) => {
//     const file = e.target.files[0]
//   var reader = new FileReader()
//   reader.readAsDataURL(file)
//   console.log('reader', reader)
//   const a = Number(e.target.id)
//   //监听文件读取结束后事件
//   reader.onloadend = function (c) {
//     // console.log('sajdlksa', c.target?.result)
//     form.value.file = c.target.result
//     //e.target.result就是最后的路径地址
//   }
// }
const router = useRouter()
const props = defineProps(["value"])
const emit = defineEmits(["updateValue"])
const content = ref("")
const myQuillEditor = ref()
const form = reactive({
  name:'',
  title:''
})
watch(
  () => props.value,
  (val) => {
    toRaw(myQuillEditor.value).setHTML(val);
  },
  { deep: true }
);
const up = async () => {
    // const formdata = new FormData();
    // const response = await fetch(form.value.file);
    // const blob = await response.blob()
    // formdata.append("file", blob)
    // formdata.append('name',form.value.name)
    // formdata.append('writer',form.value.writer)
    // formdata.append('phone',form.value.phone)
    // formdata.append('title',form.value.title)
    // formdata.append('content',appcontent.value)
    await addcompany({content:appcontent.value,...form})
    router.push('/service/campusintro')
};
const fileBtn = ref();
const data = reactive({
  content: "",
  editorOption: {
    modules: {
      toolbar: [
        ["bold", "italic", "underline", "strike"],
        [{ size: ["small", false, "large", "huge"] }],
        [{ font: [] }],
        [{ align: [] }],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ header: 1 }, { header: 2 }],
        ["image"],
        [{ direction: "rtl" }],
        [{ color: [] }, { background: [] }],
      ],
    },
    placeholder: "请输入公司介绍...",
  },
});
const imgHandler = (state) => {
  if (state) {
    fileBtn.value.click();
  }
}
const appcontent = ref(null)
const setValue = () => {
  appcontent.value = toRaw(myQuillEditor.value).getHTML()
  console.log(appcontent.value);
};
const handleUpload = async (e) => {
  const file = e.target.files[0]
  var reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = async function (c) {
    const formdata = new FormData()
    const response = await fetch(c.target.result)
    const blob = await response.blob()
    formdata.append("file", blob)
    const res = await addactivity(formdata)
    console.log(res)
    
    // const files = Array.prototype.slice.call(e.target.files)
    const quill = toRaw(myQuillEditor.value).getQuill()
    const length = quill.selection.savedRange.index
    quill.insertEmbed(length, "image", res.data)
    quill.setSelection(length + 1)
  };
  // console.log(files, "files")
  // if (!files) {
  //   return;
  // }
  // const formdata = new FormData()
  // formdata.append('file', files[0])
  // backsite.uploadFile(formdata)  // 此处使用服务端提供上传接口
  //   .then(res => {
  //     if (res.data.url) {
  //       const quill = toRaw(myQuillEditor.value).getQuill()
  //       const length = quill.getSelection().index
  //       quill.insertEmbed(length, 'image', res.data.url)
  //       quill.setSelection(length + 1)
  //     }
  //   })
}
// 初始化编辑器
onMounted(() => {
  const quill = toRaw(myQuillEditor.value).getQuill('')
  if (myQuillEditor.value) {
    quill.getModule("toolbar").addHandler("image", imgHandler)
  }
  document.title="编辑新闻"
});
</script>
<style scoped>
.ql-formats {
  text-align: center;
}
.ql-editor img {
  max-width: 10px;
  height: auto;
}
.change {
  color: red;
}
.banner {
  margin: auto;
  /* margin-left: 20px; */
  margin-top: 20px;
  margin-bottom: 20px;
  /* padding-left: 20px; */
  width: 98%;
  height: 1050px;
  /* border: 1px solid #309ad8; */
  box-shadow: 1px 1px 5px 5px #cbccd3;
}
.hengtiao {
  width: 100%;
  height: 40px;
  background-color: lightskyblue;
}
.xinxi {
  margin-top: 20px;
  padding-left: 20px;
}
.anniu {
  /* margin: auto; */
  margin-top: 60px;
  margin-left: 20px;
  /* margin-top: 20px; */
  width: 70px;
  height: 30px;
  background-color: lightskyblue;
  border: 0px;
  /* background-color: #9d8feb; */
}
.tupian {
  padding-left: 20px;
}
.fengmian {
  margin-top: 20px;
  margin-bottom: 10px;
}
.wenben {
  margin: auto;
  width: 98%;
  height: 430px;
}
</style>
